<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref } from "vue";
import { useProvider } from "./provider";

type Options = {
  direction: "horizontal" | "vertical";
};

const props = withDefaults(defineProps<Options>(), { direction: "vertical" });

// const currentComponent = ref();
const { routers, activeMenu, popHistoryRoute, routeHistory, clearHistory } =
  useProvider();

onMounted(() => {
  // currentComponent.value = activeMenu.value.component;
});
</script>

<template>
  <el-container class="k8s-container">
    <el-aside width="200px" class="side-menu">
      <el-menu
        :default-active="activeMenu.key"
        :router="false"
        :mode="props.direction"
      >
        <el-sub-menu
          v-for="menu in routers.filter(r => !r.hideInMenu)"
          :key="menu.key"
          :index="menu.key"
        >
          <template #title>
            <el-icon><Document /></el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item
            v-for="cMenu in menu.children?.filter(r => !r.hideInMenu)"
            :key="cMenu.key"
            :index="cMenu.key"
            @click="(clearHistory(), (activeMenu = cMenu))"
          >
            <template #title>
              <el-icon><Document /></el-icon>
              <span>{{ cMenu.name }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-main class="view-main">
      <el-container>
        <el-header v-if="routeHistory.length > 1">
          <el-button icon="ArrowLeftBold" text @click="popHistoryRoute" />
        </el-header>
        <el-main>
          <Transition name="trans">
            <component :is="activeMenu.component" v-bind="activeMenu.props" />
          </Transition>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
.trans-enter-active,
.trans-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 0.3s ease;
}

.trans-enter-from,
.trans-leave-to {
  opacity: 0;
  transform: translateX(-130px);
}

.k8s-container {
  height: 100%;
}

.side-menu {
  --el-menu-base-level-padding: 10px;

  height: var(--sr-container-height);
  background-color: var(--el-bg-color);
  overflow-y: auto;
  border-radius: 10px;
  :deep(.el-menu) {
    border-right: none;
    overflow-x: hidden;
  }

  :deep(.el-sub-menu__title) {
    padding: 0 10px !important;
  }
}

.view-main {
  position: relative;
  margin: 0 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--el-bg-color);
  :deep(.el-header) {
    --el-header-padding: 0 !important;
    --el-header-height: 40px !important;
  }
  :deep(.el-main) {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(var(--sr-container-height) - 40px - 20px);
    --el-main-padding: 0 !important;
  }
}

.float-back {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
</style>
